<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../library/jquery-jvectormap-2.0.3/jquery-jvectormap-2.0.3.css">
    <link rel="stylesheet" href="../library/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../webFonts/iconfont.css">
    <link rel="stylesheet" href="./style/index.css">
    <link rel="stylesheet" href="style/regional-division.css">
    <title>十八度灰</title>
</head>
<body>
<article id="neutrey">
    <aside id="favor" class="opened">
        <ul>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
        </ul>
    </aside>
    <article id="main" class="opened">
        <header id="description">
            <section class="left_part">
                <figure id="logo"></figure>
                <div id="menu">
                    <div id="home"  class="category_title">
                        <span>总揽</span>
                    </div>
                    <div id="category">
                        <div class="category_title">
                            <span>功能</span>
                            <span class="icon">&#x2228;</span>
                        </div>
                        <section id="sub_menu">
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>商品</em>
                                </dt>
                                <dd>
                                    <a href="./commodity-manage.html" class="product_link_item">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品管理</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./commodity-category-manage.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品品类</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./product-brand.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品品牌</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./features.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品属性</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./commodity-fabric.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品面料</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./customize-generation.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>年龄段</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>店柜和员工</em>
                                </dt>
                                <dd>
                                    <a class="product_link_item" href="./department.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>组织架构</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./users-manage.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>用户管理</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./regional-division.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>区域划分</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>客户</em>
                                </dt>
                                <dd>
                                    <a class="product_link_item" href="./customer-information.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>客户信息</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./complaints.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>客户投诉</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>平台功能</em>
                                </dt>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>平台功能</em>
                                </dt>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                            </dl>
                        </section>
                    </div>
                </div>
            </section>
            <section class="right_part">
                <span>个人</span>
                <span>修改密码</span>
                <span>退出</span>
            </section>
        </header>
        <section id="content">
            <div id="collapse" class="opened">
                <<
            </div>
            <div class="panel_header container-fluid">
                <div class="button-group">
                    <button class="add-region btn btn-default">新增区域</button>
                </div>
                <h2>区域划分</h2>
                <form action="" class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control"/>
                    </div>
                    <button class="btn btn-default glyphicon glyphicon-search"></button>
                </form>
            </div>
            <article class="container-fluid">
                <div class="panel_title row">
                    <div class="region-code col-sm-1">区域编码</div>
                    <div class="region-name col-sm-2">区域名称</div>
                    <div class="province-city col-sm-9">省份（直辖市）</div>
                </div>
                <article class="list">
                    <div class="list-item row" id="01">
                        <div class="region-code col-sm-1">01</div>
                        <div class="region-name col-sm-2">华北</div>
                        <div class="province-city col-sm-9">北京，天津，河北</div>
                    </div>
                    <div class="list-item row" id="02">
                        <div class="region-code col-sm-1">02</div>
                        <div class="region-name col-sm-2">西北</div>
                        <div class="province-city col-sm-9">新疆，甘肃</div>
                    </div>
                    <div class="list-item row" id="03">
                        <div class="region-code col-sm-1">01</div>
                        <div class="region-name col-sm-2">西南</div>
                        <div class="province-city col-sm-9">四川，云南</div>
                    </div>
                    <div class="list-item row">
                        <p class="nomore">已没有更多</p>
                    </div>
                </article>
            </article>
            <div class="panel_footer">
                <p>共3条</p>
            </div>
            <article class="aside-slider-content">
                <div class="panel_header">
                    区域划分详情
                    <span class="glyphicon glyphicon-remove cancel"></span>
                </div>
                <article class="panel_body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div class="item-title">区域编码</div>
                            <div class="item-value">01</div>
                        </li>
                        <li class="list-group-item">
                            <div class="item-title">区域名称</div>
                            <div class="item-value">华北</div>
                        </li>
                        <li class="list-group-item">
                            <div class="item-title">省份（直辖市）</div>
                            <div class="item-value range-value">北京，天津，河北</div>
                        </li>
                    </ul>
                </article>
                <div class="panel_footer">
                    <button class="btn btn-default" id="edit_region">编辑</button>
                    <button class="btn btn-default" id="delete_region">删除</button>
                    <button class="btn btn-default" id="ban_region" disabled>禁用</button>
                </div>
            </article>
        </section>
        <footer id="copyRight">
            Copyright © 2017 - 2018 neutrey.com. All Rights Reserved.
        </footer>
    </article>
</article>
<div class="masking"></div>
<article class="modal-big container-region-new">
    <div class="panel_header">
        新增区域
        <span class="glyphicon glyphicon-remove cancel"></span>
    </div>
    <div class="panel_body">
        <form class="body">
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="input-group">
                        <label for="region_code">区域编码</label>
                        <input type="text" class="form-control" id="region_code"/>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="input-group">
                        <label for="region_name">区域名称</label>
                        <input type="text" class="form-control"  id="region_name"/>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="input-group">
                        <label>包含省份（直辖市）</label>
                    </div>
                </li>
            </ul>
        </form>
        <div id="map"></div>
    </div>
    <div class="panel_footer text-right">
        <button class="btn btn-primary" id="save_add_next">保存并添加下一个</button>
        <button class="btn btn-primary" id="save">保存</button>
        <button class="btn btn-default cancel">取消</button>
    </div>
</article>
<article class="modal-small panel container-delete-region">
    <div class="panel_header">删除区域确认<span class="glyphicon glyphicon-remove cancel"></span></div>
    <div class="panel_body">
        <p class="iconfont">&#xe636;</p>
        <p>
            确定要删除此区域吗?<br />
            区域编码：01<br />
            区域名称：华北 <br>
            省份（直辖市）: 北京，天津，河北<br>
        </p>
    </div>
    <div class="panel_footer">
        <button class="btn btn-primary" id="save_delete">确定</button>
        <button class="btn btn-default cancel">取消</button>
    </div>
</article>
<script src="../library/jquery-3.1.1.min.js"></script>
<script src="../library/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../scripts/index.js"></script>
<script src="../library/jquery-3.1.1.min.js"></script>
<script src="../library/jquery-jvectormap-2.0.3/jquery-jvectormap-2.0.3.min.js"></script>
<script src="../library/jquery-jvectormap-2.0.3/china.js"></script>
<script src="../scripts/regional-division.js"></script>
</body>
</html>